<template>
  <div class="setup">
    <nav class="nav">
        <router-link class="iconleft"
        :to="{ path:'/personal'}">&lt;</router-link>
      设置
    </nav>
    <div class="banner">
      <div class="banner">
        <div class="center">
          <div class="user">
            <span class="userimg" :style="userimg"></span>
          </div>
          <p class="uname">
            旺仔牛奶<br />
            {{userMsg}}
          </p>
        </div>
      </div>
    </div>
        <ul id="msglist">
          <li  v-for="(item, index) in msglist" :key="index" class="msgleft">{{ item.msg }}</li>
        </ul>
    <div class="btnbox"><router-link :to="{path:'/login'}" class="btn">退出登录</router-link></div>
  </div>
</template>

<script>
import "../../../static/css/personalIcon/iconfont.css";
export default {
  data() {
    return {
      userMsg:'',
      userimg: {
        background:
          " url(" +
          require("../../../static/images/prosonal/userimg.jpg") +
          ")center center no-repeat",
        backgroundSize: "100% 100%",
        width: "80px",
        height: "80px",
        borderRadius: "50%",
        display: "block",
      },
      msglist: [
        { msg: "消息推送" },
        { msg: "帐号与安全" },
        { msg: "视频自动播放设置" },
        { msg: "联系我们" },
        { msg: "帮助中心" },
        { msg: "给我们打分" },
        { msg: "清理缓存" },
        { msg: "用户协议" },
        { msg: "隐私条款" },
        { msg: "版本检测" },
      ],
    };
  },
  mounted(){
    this.userMsg=sessionStorage.getItem("Userphone");
  }
};
</script>

<style scoped lang="less">
.setup {
  width: 100%;
}
.nav {
    font-size: 16px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f3d02a;
  position: relative;
  .iconleft {
    text-decoration: none;
    position: absolute;
    left: 10px;
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}
.banner {
  width: 100%;
  height: 80px;
  position: relative;
  top: 5px;
  text-align: center;
  .user {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 20px;
  }
  .uname {
    position: absolute;
    left: 100px;
    text-align: left;
    line-height: 25px;
  }
}
#msglist{
    list-style: none;
    width: 100%;
    padding: 0;
    li{
      text-align: left;
        text-indent: 30px;
        height: 40px;
        line-height: 40px;
        position: relative;
        left: 0;
        width: 100%;
        color: #666;
        &::before{
            display: block;
            content:">";
           position: absolute;
           right: 20px;
           font-size: 20px;
        }
    }
}
.btnbox{
    width: 100%;
    position: relative;
}
.btn{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f3d02a;
    border: none;
    outline: none;
    width: 80%;
    height: 35px;
    line-height: 35px;
    border-radius: 15px;
    font-size: 16px;
    text-decoration: none;
    text-align:center ;
    color: #333;
}
</style>